// 全局
// 主轮播图  
let index = 0;
let liLen = $(".animate-common li").length
let sr;
let ediData, colData, buyData, num, imAge, title, id, price;
let idNum = 1
    // 获取json文件
    // 字符串拼接

// 获取页面?后面的字符    (?id=2)
var searchURL = window.location.search;
// 将获取到的字符以"="进行分割   得到数据(数组) ["?id", "2"]
searchURL = searchURL.split("=");
id = searchURL[1]
    // 获取json数据并进行页面渲染(小图)

$.getJSON("../json/goods3.json", function(data) {
    // 遍历json文件......
    for (i = 0; i < data.length; i++) {

        // 查找(判断)=后面的数值在json文件中对应的id  将其提取出来用jq将其进行修改(渲染)
        if (data[i].id == searchURL[1]) {

            // console.log();
            // 将整个json文件的图片(数组赋值给全局变量)  下面(放大镜)调用备用
            sr = data[i].src
            imAge = sr[0]
            title = data[i].title
            price = data[i].price
                // $(".big-img").html("<img src=" + data[i].src[0] + ">")
            $(".small-box").css('background-image', 'url(' + data[i].src[1] + ')')
            $(".pro-name").html(data[i].title)
            $(".pro-slogan").html(data[i].info)
            $(".pro-price").html(data[i].price)
                // console.log(data[i].color);
            var imgLen = data[i].src.length
            $(".animate-common").empty()

            // data.src  为数组类型
            for (let j = 1; j < imgLen; j++) {
                $(".animate-common").append("<li><img src=" + data[i].src[j] + "></img></li>")
            }



            // 手机版本
            var edi = data[i].edition.length
                // $("#edition").empty()
            if (edi) {
                $("#edition").empty()
            } else {
                $("#edition").parent().html("")
            }
            for (let e = 0; e < edi; e++) {
                $("#edition").append("<div class='pro-choose-pill'>" + data[i].edition[e] + "</div></div>")
            }
            // 点击手机版本边框
            let ediLen = $("#edition").children().length
            for (let ei = 0; ei < ediLen; ei++) {
                ediData = $("#edition").children().eq(0).html()
                $("#edition").children().eq(ei).click(function() {
                    $("#edition").find("div").css('border', '1px solid #DCE1E4')
                    $(this).css('border', '1px solid #00c65e')
                        // ediData = $(this).html()
                })
            }


            // 手机颜色
            var col = data[i].color.length
            if (col) {
                $("#color").empty()
            } else {
                $("#color").parent().html("")
            }
            for (let c = 0; c < col; c++) {
                $("#color").append("<div class='pro-choose-pill'>" + data[i].color[c] + "</div></div>")
            }
            // 点击手机颜色边框
            let colLen = $("#color").children().length
            for (let ci = 0; ci < colLen; ci++) {
                colData = $("#color").children().eq(0).html()
                $("#color").children().eq(ci).click(function() {
                    $("#color").find("div").css('border', '1px solid #DCE1E4')
                    $(this).css('border', '1px solid #00c65e')
                    colData = $(this).html()
                })
            }


            // 购买方式
            var buy = data[i].buy.length
            $("#buy").empty()
            for (let b = 0; b < buy; b++) {
                $("#buy").append("<div class='pro-choose-pill'>" + data[i].buy[b] + "</div></div>")
            }
            // 点击手机购买方式边框
            let buLen = $("#buy").children().length
            for (let bi = 0; bi < buLen; bi++) {
                buyData = $("#buy").children().eq(0).html()
                $("#buy").children().eq(bi).click(function() {
                    $("#buy").find("div").css('border', '1px solid #DCE1E4')
                    $(this).css('border', '1px solid #00c65e')
                    buyData = $(this).html()
                })
            }
            // $(".button-col").children().eq(0)

            // 点击将选购信息传递到购物车
            for (let t = 0; t < 2; t++) {
                $(".button-col").children().eq(t).click(function() {
                    num = $("#num").html()
                        // console.log(ediData, colData, buyData, num, imAge, title, id, idNum);
                        // 创建sessionStorage

                    let ss = sessionStorage;
                    ss.removeItem("IsThisFirstTime_Log_From_LiveServer")

                    // ss.setItem("idNum", idNum++)
                    // ss.setItem("edition", ediData)
                    // ss.setItem("color", colData)
                    // ss.setItem("buy", buyData)
                    // ss.setItem("num", num)
                    // ss.setItem("image", imAge)
                    // ss.setItem("title", title)
                    // ss.setItem("id", id)
                    // console.log(ss.getItem("idNum"));
                    ss.setItem(id, [ediData, colData, buyData, num, imAge, title, id, idNum, price])
                    let a = JSON.stringify(ss) //转为字符串
                    let b = JSON.parse(a)
                        // console.log(b["1"].split(","));
                        // let arr = []
                    let n = 0;
                    for (index in b) {
                        console.log(index);
                        // console.log(b[index].split(",")[6]);
                    }

                    // console.log(ss.getItem("2").length);
                    // console.log(ss.getItem("3").length)


                    // 传输到数据库
                    // let xhr;
                    // if (window.ActiveXObject) {
                    //     xhr = new ActiveXObject("Microsoft.XMLHttp");
                    // } else {
                    //     xhr = new XMLHttpRequest();
                    // }
                    // xhr.open("POST", "./js/sendgoods.php", true);
                    // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    // xhr.onreadystatechange = function() {
                    //     if (xhr.status == 200 && xhr.readyState == 4) {
                    //         console.log(xhr.responseText)
                    //         fun(xhr.responseText);
                    //         // console.log((xhr.responseText))
                    //     }
                    // }
                    // xhr.send("id=" + id + "&image=" + imAge + "&title" + title + "&edidata" + ediData + "&color" + colData + "&buy" + buyData + "&num" + num);

                    // function fun(str) {
                    //     // let oSpan = document.querySelector("span");

                    //     if (str != 1) {
                    //         alert("用户已存在,请重新登录");
                    //     } else if (str == 1) {
                    //         alert("登录成功;点击跳转到首页");
                    //         window.location.href = "index.html";
                    //     }
                    // }

                })
            }
        }
    }



    // 获取到json文件后并在详情页进行渲染
    // 将渲染的小图遍历
    // 获取下标并复制给全局变量index
    // 获取到下标后修改对应下标图片样式(border);并将对应下标图片对应的图片显示到详情图
    for (let i = 0; i < liLen + 1; i++) {
        $(".animate-common li").eq(i).click(function() {
            index = i
            borColor()
        })
    }
})

// 小轮播图

$(".arrow-left").click(function() {
    index--;

    if (index <= 0) {
        index = 0
        $(".arrow-left").css({ opacity: "0.3" })
    } else {
        opColor()
    }
    borColor()
})
$(".arrow-right").click(function() {
        index++
        if (index > liLen) {
            index = liLen
            $(".arrow-right").css({ opacity: "0.3" })
        } else {
            opColor()
        }
        borColor()
    })
    // 变换按钮颜色
function opColor() {
    $(".arrow-left").css({ opacity: "1" })
    $(".arrow-right").css({ opacity: "1" })
}
// 变换边框颜色  小图及放大图
function borColor() {
    for (let i = 0; i <= liLen; i++) {
        $(".animate-common li").eq(i).css({ border: "1px solid #eeeeee" })
    }
    $(".animate-common li").eq(index).css({ border: "1px solid #cccccc" })
        // $(".big-img").html($(".animate-common li").eq(index).html())
    $(".small-box").css('background-image', 'url(' + sr[index + 1] + ')')
    $(".big-box").css('background-image', 'url(' + sr[index + 1] + ')')
}





// 放大镜
$(".small-box").mouseover(function() {
    borColor()
    $(".big-box").css('display', 'block')
    $("#mask").css('display', 'block')
})
$(".small-box").mouseout(function() {
    $(".big-box").css('display', 'none')
    $("#mask").css('display', 'none')
})
$(".small-box").mousemove(function(evt) {
    let e = evt || event;
    let left = e.pageX - $(".small-box")[0].offsetLeft - $("#mask")[0].offsetWidth / 2;
    let top = e.pageY - $(".small-box")[0].offsetTop - $("#mask")[0].offsetHeight / 2;
    if (left < 0) {
        left = 0;
    }
    let maxLeft = $(".small-box")[0].offsetWidth - $("#mask")[0].offsetWidth;
    if (left > maxLeft) {
        left = maxLeft;
    }
    if (top < 0) {
        top = 0;
    }
    let maxTop = $(".small-box")[0].offsetHeight - $("#mask")[0].offsetHeight;
    if (top > maxTop) {
        top = maxTop;
    }
    $("#mask").css('left', left + "px")
    $("#mask").css('top', top + "px")
    let x = $(".big-box")[0].offsetWidth * left / $("#mask")[0].offsetWidth
    let y = $(".big-box")[0].offsetHeight * top / $("#mask")[0].offsetHeight;
    // console.log(x, y);
    $(".big-box").css('backgroundPositionX', -x + "px")
    $(".big-box").css('backgroundPositionY', -y + "px")


})

// 点击跳转
$(".btn").click(function() {
    window.location = "cart.html"
})

// 点击增加 减少
function changeNum(dom, flag) {
    var $input = $(dom).parent().find("i")
    var value = Number($input.text())
        // console.log(value);
    if (flag) {
        value--;
        if (value < 0) {
            value = 0
        }
    } else {
        value++;
    }
    $input.html(value)
}
// 减少
$(".reduce-num").click(function() {
        changeNum(this, true)
    })
    // 增加
$(".add-num").click(function() {
    changeNum(this, false)
})

// 点击修改边框颜色